<template>
  <div class="right-sidebar-container">
    <el-card shadow="never" class="right-sidebar-card">
      <template #header>
        <div class="card-header">
          <span>论坛公告</span>
        </div>
      </template>
      <div class="notice-board">
        <ul>
          <li 
            v-for="(notice, idx) in notices" 
            :key="idx"
            @click="goNotice(notice.id)"
          >
            {{ notice.title }}
          </li>
        </ul>
      </div>
    </el-card>

    <el-card shadow="never" class="right-sidebar-card">
      <template #header>
        <div class="card-header">
          <span>热门榜单</span>
        </div>
      </template>
      <div class="hot-rank">
        <div class="rank-item" v-for="(rank, idx) in hotRank" :key="idx">
          <span class="rank-tag" :style="{background: getRankColor(idx)}">{{ idx+1 }}</span>
          <div class="rank-title">{{ rank.title }}</div>
          <div class="rank-meta">浏览{{ rank.views }}k · 类型{{ rank.type }}</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ElCard } from 'element-plus'

const router = useRouter()

const props = defineProps<{
  notices: Array<{ id: number; title: string }>
  hotRank: Array<{ id: number; title: string; views: number; type: string }>
}>()
const goNotice = (id: number) => {
  router.push(`/notice/${id}`)
}

const getRankColor = (index: number) => {
  const colors = ['#ff4d4f', '#faad14', '#52c41a'];
  return index < 3 ? colors[index] : '#d9d9d9';
}

</script>

<style scoped>
.right-sidebar-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.right-sidebar-card {
  padding: 10px;
}
.card-header {
  font-weight: bold;
}
</style>